<template>
  <div class="home-content-root">
    <h2 class="title">热门精选</h2>
    <button @click="loadMoreData">
      加载更多
    </button>
    <div class="list">
      <template v-for="(item, key) in houseList" :key="item.data.id">
        <house-item-v9 v-if="item.discoveryContentType ===9" :item-data="item.data"/>
        <house-item-v3 v-else-if="item.discoveryContentType ===3" :item-data="item.data"/>
      </template>
    </div>
  </div>
</template>

<script setup>
import {useHomeStore} from "@/stores/modules/home";
import HouseItemV9 from '@/components/house-item-v9/house-item-v9.vue'
import HouseItemV3 from '@/components/house-item-v3/house-item-v3.vue'
import {storeToRefs} from "pinia";

const homeStore = useHomeStore();
const {houseList} = storeToRefs(homeStore);
homeStore.fetchHouselistData()

function loadMoreData() {
  homeStore.fetchHouselistData()
}
</script>

<style lang="less" scoped>
// 当前组件根css类
.home-content-root {
  padding: 10px 8px;
  .title {
    font-size: 22px;
  }
}
</style>